<template>
    <section class="transfer">
        <el-dialog width="55%" :visible.sync="isShow" :fullscreen="fullscreen" :show-close="false" top="40px" :before-close="beforeClose">
            <el-row slot="title">
                <el-col :span="10" style="padding-top: 5px">
                    <span>添加成员</span>
                </el-col>
                <el-col :span="2" :offset="11">
                    <el-button type="text" v-if="!fullscreen" icon="iconfont ali-quanping" @click="fullscreen = true" style="float: right"></el-button>
                    <el-button type="text" v-else icon="iconfont ali-zuixiaohua" @click="fullscreen = false" style="float: right"></el-button>
                </el-col>
                <el-col :span="1">
                    <el-button type="text" icon="iconfont ali-guanbi" @click="parentCloseEvent" style="float: right"></el-button>
                </el-col>
            </el-row>
            <section>
                <el-row>
                    <el-col :span="11">
                        <div class="tree_transfer" v-loading="treeList.length == 0">
                            <el-tree :data="treeList" show-checkbox node-key="id" @check-change="nodeClick" 
                            :render-after-expand="false" ref="checkedNote">
                                <span slot-scope="{ node, data }">
                                    <i class="iconfont ali-wenjianjia1" v-if="!data.must"></i>
                                    <i v-else>
                                        <img :src="data.portrait" width="25" v-if="data.portrait">
                                        <i class="iconfont ali-touxiang" v-else></i>
                                    </i>
                                    <span>{{ node.label }}</span>
                                    <span v-show="!data.must && data.children.length > 0 && data.num != 0">({{data.num}}人)</span>
                                </span>
                            </el-tree>
                        </div>
                    </el-col>
                    <el-col :span="11" :offset="2">
                        <div class="tree_transfer _user">
                            <el-row v-for="user in userList" :key="user.id" style="background-color:#fff;padding: 5px 0 5px 15px">
                                <el-col :span="5" style="padding-top: 6px">
                                    <img :src="user.portrait" width="25" v-if="user.portrait">
                                    <i class="iconfont ali-touxiang" v-else></i>
                                </el-col>
                                <el-col :span="16" style="padding-top:6px">
                                    <span>{{user.label}}</span>
                                </el-col>
                                <el-col :span="3">
                                    <el-button type="text" @click="remove(user)" icon="iconfont ali-close" style="margin-top:-3px"></el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </section>
            <section slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveObj">保 存</el-button>
                <el-button @click="parentCloseEvent">取 消</el-button>
            </section>
        </el-dialog>
    </section>
</template>
<script>
/* 测试树形穿梭框 */
import { dept_listAll } from "@/api/group";
import { mapGetters } from "vuex";
import { formateGroupTree } from "@/utils/formate";

export default {
  name: "transfer",
  props: {
    isShow: Boolean
  },
  data() {
    return {
      fullscreen: false,
      treeList: [],
      userList: [],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  computed: {
    ...mapGetters(["menuDeptList"])
  },
  methods: {
    beforeClose(e) {
      this.$emit("closeTransfer");
    },
    parentCloseEvent() {
      this.$emit("closeTransfer");
    },
    openTransfer() {
      this.userList = [];
      this.treeList = [];
      this.getDeptsAndUsers();
    },
    remove(e) {
      this.userList.splice(this.userList.indexOf(e), 1);
      this.$refs.checkedNote.setChecked(e.id, false);
      setTimeout(() => {
        this.userList.pop();
      }, 10);
    },
    nodeClick(e) {
      let key = this.$refs.checkedNote.getCheckedKeys();
      if (e.must) {
        if (this.userList.indexOf(e) < 0) {
          this.userList.push(e);
        } else {
          this.userList.splice(this.userList.indexOf(e), 1);
        }
      }
    },
    saveObj() {
      //提交保存
      if (this.userList.length == 0) {
        this.$message.warning("请至少选择一位成员");
        return;
      }
      this.$emit("saveUsers", this.userList);
    },
    async getDeptsAndUsers() {
      let { data } = await dept_listAll({
        company_id: localStorage.getItem("companyId")
      });
      let formateTree = formateGroupTree(data.data.rows);
      this.treeList = formateTree;
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.tree_transfer {
  background-color: #f3f4f5;
  padding: 10px;
  border-radius: 5px;
  img {
    border-radius: 50%;
  }
}
._user {
  max-height: 450px;
  overflow: scroll;
}
.ali-wenjianjia1 {
  color: #b8e8ff;
}
</style>
